<template>
    <view class="success-page">
        <image src="https://img.thumbrary.com/success.png"/>
        <view class="title">恭喜你，借阅成功！</view>
        <view class="content">支付方式：会员卡支付</view>
        <view class="btn-wrappers common-flex-between">
            <text class="btn blue" @tap.stop="watchOrder">查看订单</text>
            <text class="btn black" @tap.stop="goHome">返回首页</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "card",
        onLoad(params){
            let { orderId } = params;
            this.orderId = orderId;
        },
        data(){
            return{
                orderId: ''
            }
        },
        methods: {
            goHome(){
                uni.switchTab({
                    url: '/pages/index/index'
                });
            },
            // 进入订单详情页面
            watchOrder(){
                uni.navigateTo({
                    url: `../orderManagement/order-detail?orderId=${this.orderId}`
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .success-page {
        text-align: center;
        image{
            width: 302rpx;
            height: 302rpx;
            border-radius: 50%;
            margin-top: 128rpx;
            margin-bottom: 60rpx;
        }
        .title{
            font-size: 34rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        .content{
            color: #999999;
            line-height: 40rpx;
        }
        .btn-wrappers{
            padding: 50rpx;
            margin-top: 90rpx;
            .btn{
                width:310rpx;
                height:88rpx;
                border-radius: 8rpx;
                line-height: 88rpx;
            }
            .blue{
                border: 1rpx solid #2BA8FC;
                color: #2BA8FC;
            }
            .black{
                border: 1rpx solid #707070;
                color: #707070;
            }
        }
    }
</style>